<template>
  <el-card class="box-card">
    <div slot="header">
      <span>试题{{ mytitle ? mytitle : "录入" }}</span>
    </div>
    <!-- 表单 -->
    <el-form ref="form" :model="fromData" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="学科:" prop="subjectID">
            <el-select
              v-model="fromData.subjectID"
              placeholder="请选择"
              @change="getdirectorys($event)"
            >
              <el-option
                v-for="item in simple"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="目录:" prop="catalogID">
            <!-- {{ mysecondMenus }} -->
            <el-select v-model="fromData.catalogID" placeholder="请选择">
              <el-option
                v-for="item in mysecondMenus"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select v-model="fromData.enterpriseID" placeholder="请选择">
              <el-option
                v-for="item in companys"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="城市:" prop="city">
            <el-select
              style="width:40%;marginRight: 10px;"
              v-model="fromData.province"
              placeholder="请选择"
              @change="choseCity($event)"
            >
              <el-option
                v-for="(item, index) in myprovinces"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              style="width:40%"
              v-model="fromData.city"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in mycitys"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="方向:" prop="direction">
            <el-select v-model="fromData.direction" placeholder="请选择">
              <el-option
                v-for="item in mydirection"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="题型:" prop="questionType">
            <el-radio-group
              v-model="fromData.questionType"
              @change="choseQt($event)"
            >
              <el-radio label="1">单选</el-radio>
              <el-radio label="2">多选</el-radio>
              <el-radio label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="难度:" prop="difficulty">
            <el-radio-group v-model="fromData.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="题干:" style="height:300px" prop="question">
            <!-- 富文本 -->
            <quill-editor class="goodsForm" v-model="fromData.question">
              题干
            </quill-editor>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :class="{ isShow: isShowChoose }">
        <el-col :span="12">
          <el-form-item label="选项:">
            <el-radio-group v-model="fromData.options" style="width:100%">
              <el-row
                type="flex"
                v-for="(item, index) in fromData.options"
                :key="index"
              >
                <el-radio v-model="item.isright" :label="item.code"> </el-radio>
                <el-input v-model="item.title"></el-input>
              </el-row>
              <!-- <el-row type="flex" style="margin: 10px 0;">
                <el-radio v-model="fromData.options.isright" label="B">
                </el-radio>
                <el-input v-model="fromData.options.title"></el-input>
              </el-row>
              <el-row type="flex">
                <el-radio v-model="fromData.options.isright" label="C">
                </el-radio>
                <el-input v-model="fromData.options.title"></el-input>
              </el-row>
              <el-row type="flex" style="margin: 10px 0;">
                <el-radio v-model="fromData.options.isright" label="D">
                </el-radio>
                <el-input v-model="fromData.options.title"></el-input>
              </el-row> -->
            </el-radio-group>
            <el-button type="danger" :disabled="isdisabled" @click="addoptions"
              >+增加选项与答案</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="解析视频:">
            <el-input v-model="fromData.videoURL"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="答案解析:" style="height:300px" prop="answer">
            <!-- 富文本 -->
            <quill-editor class="goodsForm" v-model="fromData.answer">
            </quill-editor>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="题目备注:">
            <el-input v-model="fromData.remarks"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="试题标签:">
            <el-select v-model="fromData.tags" multiple placeholder="请选择">
              <el-option
                v-for="item in mytags"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">确认提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import {
  getSimple,
  getQuestions,
  getCatalogue,
  getdirectorys,
  addquestions,
  getparticulars,
  editquestions,
  getTags
} from "@/api/choiceness";
import { provinces, citys } from "@/utils/citys";
export default {
  data() {
    return {
      fromData: {
        subjectID: "", // 学科,
        catalogID: "", //目录
        enterpriseID: "", //企业
        questionType: "", //题型
        tags: " ", //标签
        question: "", //题干
        difficulty: "", //难度
        direction: "", //方向
        province: "", //城市
        city: "", //地区
        options: [
          //正确答案
          { code: "A", title: "", img: "", isRight: false },
          { code: "B", title: "", img: "", isRight: false },
          { code: "C", title: "", img: "", isRight: false },
          { code: "D", title: "", img: "", isRight: false }
        ],
        videoURL: " ", // 解析视频
        answer: "", // 答案解析
        remarks: " "
      },
      simple: [],
      secondMenus: [],
      mysecondMenus: [],
      companys: [
        { value: "工商银行", id: 0 },
        { value: "中国银行", id: 1 },
        { value: "字节跳动", id: 2 },
        { value: "美团", id: 3 },
        { value: "国美", id: 4 },
        { value: "苏宁", id: 5 },
        { value: "京东", id: 6 },
        { value: "滴滴", id: 7 },
        { value: "小米", id: 8 },
        { value: "华为", id: 9 },
        { value: "腾讯", id: 10 },
        { value: "百度", id: 11 },
        { value: "阿里巴巴", id: 12 }
      ],
      myprovinces: [],
      mycitys: [],
      mydirection: [
        { value: "o2o", id: 1 },
        { value: "外包服务", id: 2 },
        { value: "企业服务", id: 3 },
        { value: "互联网金融", id: 4 },
        { value: "企业咨询", id: 5 },
        { value: "互联网", id: 6 },
        { value: "电子商务", id: 7 },
        { value: "其他", id: 8 }
      ],
      routerData: {},
      mytags: {},
      getmytags: "",
      mytitle: "",
      rules: {
        subjectID: [{ required: true, message: "不能为空", trigger: "blur" }],
        subjectID: [{ required: true, message: "不能为空", trigger: "blur" }], // 学科,
        catalogID: [{ required: true, message: "不能为空", trigger: "blur" }], //目录
        enterpriseID: [
          { required: true, message: "不能为空", trigger: "blur" }
        ], //企业
        questionType: [
          { required: true, message: "不能为空", trigger: "blur" }
        ], //题型
        tags: [{ required: true, message: "不能为空", trigger: "blur" }], //标签
        question: [{ required: true, message: "不能为空", trigger: "blur" }], //题干
        difficulty: [{ required: true, message: "不能为空", trigger: "blur" }], //难度
        direction: [{ required: true, message: "不能为空", trigger: "blur" }], //方向
        city: [{ required: true, message: "不能为空", trigger: "blur" }],
        answer: [{ required: true, message: "不能为空", trigger: "blur" }] // 答案解析
      },
      isdisabled: true, //button是否显示
      isShowChoose: false // 是否有题干
    };
  },
  created() {
    this.myprovinces = provinces();
    this.getSimple();
    this.getCatalogue();
    // 根据路由获取的参数
    if (this.$route.query.id) {
      this.getRouerData();
    }
    // this.getRouerData();
  },
  methods: {
    // 获取简单学科
    async getSimple() {
      const { data } = await getSimple();
      // console.log(data, "getSimple");
      this.simple = data;
    },
    // 获取目录
    async getCatalogue() {
      const id = this.simple.filter(item => item.value);
      const { data } = await getCatalogue(id);
      // console.log(data, "123456");
      this.secondMenus = data.items;
      // console.log(this.secondMenus, "1234");
    },
    // 目录
    async getdirectorys(e) {
      if (e) {
        const aa = [];
        this.secondMenus.forEach(item => {
          aa.push(item);
        });
        this.mysecondMenus = aa;
      }
      this.getTags(); // 获取标签
    },
    // 选择城市
    choseCity(e) {
      if (e) {
        this.mycitys = citys(e);
      }
    },
    // 获取标签
    async getTags() {
      const { data } = await getTags(this.fromData.subjectID);
      this.mytags = data;
    },
    // 题型变化
    choseQt(e) {
      if (e == 2) {
        this.isdisabled = false;
        this.isShowChoose = false;
      } else if (e == 3) {
        this.isShowChoose = true;
      } else {
        this.isdisabled = true;
        this.isShowChoose = false;
      }
    },
    // 复选添加
    addoptions() {
      // console.log("原数组", this.fromData.options);
      this.fromData.options.push({
        code: "",
        title: "",
        img: "",
        isRight: false
      });
      let letterArr = [];
      for (let i = 65; i < 91; i++) {
        letterArr.push(String.fromCharCode(i));
      }
      // console.log("字母 A-Z", letterArr);
      for (let i = 0; i < this.fromData.options.length; i++) {
        for (let j = 0; j < letterArr.length; j++) {
          this.fromData.options[i].code = letterArr[i];
        }
      }
      // console.log("循环之后的", this.fromData.options);
    },

    // router传递参数
    async getRouerData() {
      if (this.$route.query) {
        const { data } = await getparticulars(this.$route.query.id);
        // console.log(data);
        // this.routerData = data;
        this.fromData = data;
        this.mytitle = "修改";
      }
    },
    // 提交表单
    async submitForm() {
      // console.log(this.fromData);
      if (Array.isArray(this.fromData.tags)) {
        this.fromData.tags = this.fromData.tags.join(" ");
      }
      // 先思考新建和修改 传入的值有什么区别 对比 再想判断条件
      if (!this.$route.query.id) {
        try {
          const result = await addquestions(this.fromData);
          this.$message.success("提交成功");
          this.$router.push("/choiceness");
        } catch (error) {
          console.log(error);
        }
      } else {
        await editquestions(this.fromData);
        this.$message.success("修改成功");
        this.$router.push("/choiceness");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsForm {
  height: 200px;
}
.uplod {
  margin: 0 10px;
}

.isShow {
  display: none;
}
</style>
